<template>
  <div
    class="showPanel relative flex flex-col gap-y-[20px] h-full animate__animated transitionPanel animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <!--          区域监控列表-->
        <base-card class="flex-1 overflow-hidden" title="区域监控列表">
          <div class="flex flex-col h-full">
            <a-input-search
              class="dark_search"
              size="large"
              placeholder="请输入名称"
              v-model:value="searchKey"
              @change="onSearch"
            ></a-input-search>
            <a-tree
              class="!bg-[transparent] !text-[#fff] flex-1 overflow-auto !text-[16px] my-[10px]"
              v-if="topTreeData.length && !searchKey"
              :tree-data="topTreeData"
              :defaultExpandAll="true"
              @select="(a, b) => selectMonitor(b.node)"
              :field-names="{
                children: 'children',
                title: 'name',
                key: 'indexCode',
              }"
            ></a-tree>
            <div v-if="searchKey" class="flex-1 overflow-auto">
              <div
                class="item box-border border-[transparent] text-[14px] hover:border-[#4096ff] py-[4px] border-[1px] border-solid rounded-[6px] px-[10px] cursor-pointer text-[#fff] my-[6px]"
                v-for="(item, index) in searchList"
                :key="index"
                @click="selectMonitor(item)"
              >
                {{ item.cameraName }}
              </div>
            </div>
          </div>
        </base-card>
      </div>
      <div
        class="absolute left-[100%] pt-[50px] flex flex-col pb-[50px]"
        style="height: 100%"
      >
        <div
          class="text-[#fff] cursor-pointer absolute left-[100%] top-[50%] card py-[6px] px-[2px]"
          @click="isCollect = !isCollect"
        >
          <DoubleRightOutlined v-if="isCollect" />
          <DoubleLeftOutlined v-else />
        </div>
        <div
          class="flex-1 flex flex-col overflow-hidden relative"
          :class="isCollect ? 'w-0' : 'w-fit'"
        >
          <div
            class="w-[200px] h-[20%] card p-[10px] border-solid border-[1px] flex flex-col rounded-[8px] border-[#C6EBFC]"
            v-for="(item, index) in Array(5)"
            :key="index"
          >
            <template v-if="videoList[index]">
              <div class="h-full flex flex-col">
                <div
                  class="text-[#fff] text-center py-[4px] text-[13px] relative"
                  :title="videoList[index].cameraName"
                >
                  {{ videoList[index].cameraName }}
                  <FullscreenOutlined
                    class="text-[#fff] absolute top-[2px] right-[5px]"
                    @click="showBig(videoList[index])"
                  />
                </div>
                <div class="flex-1">
                  <video
                    style="width: 100%"
                    class="object-contain"
                    ref="monitorVideos"
                  ></video>
                </div>
              </div>
            </template>
            <div
              v-else
              class="w-full h-full flex items-center justify-center relative"
            >
              <PlusOutlined class="text-[20px] text-[#fff]" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a-modal
    title="监控视频"
    v-model:visible="showBigVideo"
    width="1500px"
    @close="showBigVideo = false"
    class="dark-modal"
  >
    <div class="w-full h-[50vh]">
      <video style="width: 100%" class="object-fill" ref="bigVideo"></video>
    </div>
    <template #footer>
      <div class="flex justify-center">
        <a-button type="primary" @click="showBigVideo = false">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import {
  DoubleRightOutlined,
  DoubleLeftOutlined,
  PlusOutlined,
  FullscreenOutlined,
} from "@ant-design/icons-vue";
import { onMounted, ref } from "vue";
import { getJTWL, searchVideos } from "@/api/dataScreen/dataScreen.js";
import { getVideoMonitoring } from "@/api/threeJs/threeJsApi.js";
import { hlsPlay2 } from "@/utils/hlsPlay.js";
import { Videos } from "@/utils/constant.js";
const isCollect = ref(true);
const videoList = ref([]);
const topList = ref([]);
const showBigVideo = ref(false);
const monitorVideos = ref();
const topTreeData = ref([]);
const searchKey = ref("");
const searchList = ref([]);
const bigVideo = ref(null);
const bigVideoSrc = ref("");
const showBig = (item) => {
  showBigVideo.value = true;
  nextTick(() => {
    // bigVideo.value.src = item.src;
    bigVideoSrc.value = item.src;
    hlsPlay2(bigVideo.value, item.src);
  });
};
const selectMonitor = (item) => {
  getVideoMonitoring({
    cameraIndexCode: item.cameraIndexCode,
  }).then((res) => {
    if (videoList.value.length < 5) {
      videoList.value.push({
        src: res.data.url,
        indexCode: item.cameraIndexCode,
        cameraName: item.cameraName,
      });
    } else {
      videoList.value.shift();
      videoList.value.push({
        src: res.data.url,
        indexCode: item.cameraIndexCode,
        cameraName: item.cameraName,
      });
    }
    nextTick(() => {
      hlsPlay2(monitorVideos.value[videoList.value.length - 1], res.data.url);
    });
  });
};
const onSearch = () => {
  if (searchKey.value) {
    searchVideos({ cameraName: searchKey.value }).then((res) => {
      let result = res.data || [];
      // let result = SearchVIDEOs;
      searchList.value = result;
    });
  }
};
const getData = () => {
  getJTWL().then((res) => {
    topList.value = res.data;
    let data = res.data;
    // let data = Videos;

    data.map((item) => {
      let tempCameras = [];
      if (item.cameras && item.cameras.length > 0) {
        if (!item.children) {
          item.children = [];
        }
        item.cameras.map((c) => {
          c.indexCode = c.cameraIndexCode;
          c.name = c.cameraName;
          tempCameras.push(c);
        });
        item.children.unshift(...tempCameras);
      }
      if (item.children && item.children.length > 0) {
        item.children.map((c) => {
          addTreeData(c);
        });
      }
    });
    topTreeData.value = data;
  });
};
const addTreeData = (pNode) => {
  if (pNode.cameras && pNode.cameras.length > 0) {
    if (!pNode.children) {
      pNode.children = [];
    }
    let tempCameras = [];
    pNode.cameras.map((c) => {
      c.indexCode = c.cameraIndexCode;
      c.name = c.cameraName;
      // pNode.children.unshift(c);
      tempCameras.push(c);
    });
    pNode.children.unshift(...tempCameras);
  }
  if (pNode.children && pNode.children.length > 0) {
    pNode.children.map((c) => {
      addTreeData(c);
    });
  }
};
onMounted(() => {
  getData();
});
</script>
<style scoped lang="less">
.card {
  background: rgba(25, 45, 67, 0.5);
  backdrop-filter: blur(20px); /* 背景模糊 */
  -webkit-backdrop-filter: blur(20px); /* 兼容老版本 Safari */
}
</style>
